<template>
  <div class="centralRegion">
    <!-- 顶部操作选项 -->
    <div class="topNav">
      <el-row>
        <el-col :span="3">
          <el-input
            v-model="basicsData.wide"
            style="width: 110px"
            placeholder="Please input"
          >
            <template #prepend>宽</template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="basicsData.high"
            style="width: 110px"
            placeholder="Please input"
          >
            <template #prepend>高</template>
          </el-input>
        </el-col>
        <el-button-group>
          <el-button @click="cfn">widgetList</el-button>
          <el-button :icon="Delete" @click="clearWidgetList"></el-button>
          <el-button :icon="Guide" @click="drawer = true"></el-button>
        </el-button-group>

        <el-col :span="1" :offset="5">
          <el-text type="primary">{{ basicsData.zoom }}%</el-text></el-col
        >
      </el-row>
      <el-drawer
        v-model="drawer"
        title="层次结构"
        direction="ltr"
        size="20%"
        @open="drawerOpen"
      >
        <el-tree
          draggable
          :data="widgetList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
          :expand-on-click-node="false"
          node-key="id"
          ref="treeRef"
          highlight-current
        />
      </el-drawer>
    </div>
    <el-scrollbar :height="scrollerHeight">
      <!-- 拖拽区域 -->
      <div
        class="exhibitionArea"
        :style="{
          width: basicsData.wide + 'px',
          height: basicsData.high + 'px',
        }"
        @mousewheel.ctrl.prevent="rollImg"
        ref="imgDiv"
      >
        <draggable
          :list="widgetList"
          item-key="key"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }"
          handle=".drag-handler"
          tag="transition-group"
          :component-data="{ name: 'fade' }"
          @end="onDragEnd"
          @start="onDragStart"
          @remove="onDragRemove"
          @choose="onDragChoose"
          @sort="onDragSort"
          @clone="onDragClone"
          @add="onDragAdd"
          @update="onDragUpdate"
          :move="onDragMove"
        >
          <template #item="{ element, index }">
            <div v-if="element.move">
              <component
                v-bind:is="FieldComs[`${element.type}Widget`]"
                :key="element.id"
                :widget="element"
              >
                <template v-if="selectedId == element.id">
                  <el-button-group class="controlGroupCom">
                    <el-text type="primary">{{ element.type }}</el-text>
                    <el-button :icon="Rank" class="drag-handler"></el-button>
                    <el-button
                      :icon="Delete"
                      @click.stop="onClickDelete(widgetList, index)"
                      >11</el-button
                    >
                  </el-button-group>
                </template>
              </component>
            </div>
            <component
              v-bind:is="FieldComs[`${element.type}Widget`]"
              :key="element.id"
              :widget="element"
              v-else
            >
              <template v-if="selectedId == element.id">
                <el-button-group class="controlGroupCom">
                  <el-text type="primary">{{ element.type }}</el-text>
                  <el-button
                    :icon="Delete"
                    @click.stop="onClickDelete(widgetList, index)"
                    >11</el-button
                  >
                </el-button-group>
              </template>
            </component>
          </template>
        </draggable>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import draggable from "@marshallswain/vuedraggable";
import {
  widgetList,
  clearWidgetList,
  selectedId,
  onClickDelete,
  assignmentWidget,
} from "@/views/pageDesign/components/globalVariable";
import FieldComs from "./index.js";
import { Delete, Rank, Guide } from "@element-plus/icons-vue";
import useCaHeight from "@/components/hooks/useCaHeight";

defineOptions({
  name: "centralRegion",
  inheritAttrs: false,
});

let { scrollerHeight, calculatedAltitude } = useCaHeight();

let basicsData = reactive({
  wide: 1920,
  high: 1080,
  zoom: 100,
});

let cfn = () => {
  console.log(widgetList, "widgetList");
};

// 放大缩小
let imgDiv = ref(null);
let rollImg = (event) => {
  basicsData.zoom = parseInt(imgDiv.value.style.zoom) || 100;
  basicsData.zoom += event.wheelDelta / 15;
  if (basicsData.zoom > 40 && basicsData.zoom < 120) {
    imgDiv.value.style.zoom = `${basicsData.zoom}%`;
  }
  return false;
};

let onDragEnd = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("end拖动结束时的回调函数");
  // console.log("to", to);
  // console.log("from", from);
  // console.log("item", item);
  // console.log("clone", clone);
  // console.log("oldIndex", oldIndex);
  // console.log("newIndex", newIndex);
};
let onDragStart = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("Start拖动开始时的回调函数");
  // console.log("to", to);
  // console.log("from", from);
  // console.log("item", item);
  // console.log("clone", clone);
  // console.log("oldIndex", oldIndex);
  // console.log("newIndex", newIndex);
};
let onDragRemove = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("remove单元被移动到另一个列表时的回调函数");
};
let onDragChoose = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("choose选择单元时的回调函数");
};
let onDragSort = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("sort排序发生变化时的回调函数");
};
let onDragClone = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("cloneclone时的回调函数");
};
let onDragAdd = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("add添加单元时的回调函数");
  return false;
};
let onDragUpdate = ({ to, from, item, clone, oldIndex, newIndex }) => {
  // console.log("add排序发生变化时的回调函数");
};
let onDragMove = (origin1, origin2, origin3, origin4, origin5) => {
  // console.log(origin1, "origin1");
  // console.log(origin2, "origin2");
  // console.log(origin3, "origin3");
  // console.log(origin4, "origin4");
  // console.log(origin5, "origin5");
  // return false;
};

onMounted(() => {
  calculatedAltitude(45 + 32);
});

// 层次结构
let drawer = ref(false);
//高亮树中的选中节点
let drawerOpen = () => {
  treeRef.value.setCurrentKey(selectedId.value);
};

let treeRef = ref();
const defaultProps = {
  children: "widgetList",
  label: "name",
};
const handleNodeClick = (data) => {
  assignmentWidget(data);
};
</script>

<style lang="scss" scoped>
.centralRegion {
  .topNav {
    margin-bottom: 5px;
    ::v-deep {
      .el-tree > .el-tree-node:after {
        border-top: none;
      }
      .el-tree-node {
        position: relative;
        padding-left: 12px;
      }

      .el-tree-node__content {
        padding-left: 0 !important;
      }

      .el-tree-node__expand-icon.is-leaf {
        display: none;
      }

      .el-tree-node__children {
        padding-left: 12px;
        overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
      }

      .el-tree-node :last-child:before {
        height: 38px;
      }

      .el-tree > .el-tree-node:before {
        border-left: none;
      }

      .el-tree > .el-tree-node:after {
        border-top: none;
      }

      .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
      }

      .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
      }

      .el-tree-node:before {
        border-left: 1px dashed #4386c6;
        bottom: 0px;
        height: 100%;
        top: -10px;
        width: 1px;
      }

      .el-tree-node:after {
        border-top: 1px dashed #4386c6;
        height: 20px;
        top: 12px;
        width: 16px;
      }

      .el-tree-node.is-current > .el-tree-node__content {
        background: #c2d6ea !important;
      }

      .el-tree-node__expand-icon {
        margin-left: -3px;
        padding: 6px 6px 6px 0px;
        font-size: 16px;
      }
    }
  }
  .exhibitionArea {
    background: #efefef;
    // .controlGroupCom{
    //   width:200px;
    // }
  }
}
</style>
